import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router'
import { push } from 'connected-react-router'
import Group from './group'
import Block from './block'
import Label from './label'
import Item from './item'

const TypeView = ({ lableState, link, match }) => {
  const urls = match.url.split('/')
  return (
    <Group title="文件类型">
      <Block>
        <Item active={lableState === 'label'} action={() => link(`/${urls[1]}/${urls[2]}/label`)}>
          <img
            className="label-img32"
            src="https://img.icons8.com/ios/2x/in-progress-filled.png"
            alt=""
          />
          <br />
          <Label title="未完成" />
        </Item>
        <Item active={lableState === 'done'} action={() => link(`/${urls[1]}/${urls[2]}/done`)}>
          <img className="label-img32" src="https://img.icons8.com/color/2x/ok.png" alt="" />
          <br />
          <Label title="已完成" />
        </Item>
        <Item active={lableState === 'all'} action={() => link(`/${urls[1]}/${urls[2]}/all`)}>
          <img
            className="label-img32"
            src="https://img.icons8.com/office/2x/75-percents.png"
            alt=""
          />
          <br />
          <Label title="所有任务" />
        </Item>
      </Block>
    </Group>
  )
}

const mapDispatchToProps = {
  link: push,
}

export default withRouter(
  connect(
    null,
    mapDispatchToProps,
  )(TypeView),
)
